<template>
  <div>
    <Header></Header>
    <div class="number">
      <div class="number-container">
        <div class="step-wrap">
          <div class="step">
            <div>1</div>
            <p></p>
            <div>2</div>
            <p class="active"></p>
            <div class="active">3</div>
          </div>
          <div class="msg">
            <li>注册账号</li>
            <li>选择类型</li>
            <li class="active">填写资料</li>
          </div>
        </div>
        <div class="enter-type">
          <li>
            <img src="../../assets/images/gren.png" alt>
            <div class="type-name">个人</div>
            <div class="type-content">面向个人，提供以文字、图片创作为主的内容管理、互动平台、寻找自己的用户，打造自己的品牌</div>
            <div class="type-apply" @click="$router.push('/person')">申请入驻</div>
          </li>
          <li>
            <img src="../../assets/images/qmt.png" alt>
            <div class="type-name">媒体</div>
            <div class="type-content">面向专注于内容生产的公司、创作团队及MCN，共享开放平台。</div>
            <div class="type-apply" @click="$router.push('/media')">申请入驻</div>
          </li>
          <li>
            <img src="../../assets/images/zf.png" alt>
            <div class="type-name">政府</div>
            <div class="type-content">政务公开：面向国家各省市区的各级党政机关，为扩大政务信息公开而打造的政务平台。</div>
            <div class="type-apply" @click="$router.push('/gov')">申请入驻</div>
          </li>
          <li>
            <img src="../../assets/images/other.png" alt>
            <div class="type-name">企业/机构/其他组织</div>
            <div class="type-content">面向企业、机构、以及其他提供内容或服务的组织申请共享海量流量资源，扩大自身品牌影响力。</div>
            <div class="type-apply" @click="$router.push('/org')">申请入驻</div>
          </li>
        </div>
      </div>
    </div>
    <Footer></Footer>
  </div>
</template>

<script>
import Header from "@/common/Header/Header";
import Footer from "@/common/Footer/Footer";
export default {
  name: "number",
  data() {
    return {};
  },
  components: {
    Header,
    Footer
  }
};
</script>
<style lang="scss" scoped>
.number {
  height: auto;
  width: 100%;
  margin-top: 70px;
      background: #fff;
      padding-bottom: 10px;
  .number-container {
    width: 100%;
    height: auto;
    border-top: 3px solid #fff;
    .step-wrap {
      width: 1000px;
      margin: 0 auto;
      margin-bottom: 62px;
      height: 150px;
      .step {
        width: 659px;
        height: 150px;
        margin: 0 auto;
        display: flex;
        justify-content: space-between;
        margin-top: 60px;
        .active {
          background-color: #ddd;
        }
        div {
          width: 37px;
          height: 37px;
          background: #aed6ff;
          color: #fff;
          border-radius: 100%;
          text-align: center;
          line-height: 37px;
        }
        p {
          background-color: #aed6ff;
          height: 5px;
          width: 275px;
          margin-top: 15px;
        }
      }
      .msg {
        width: 700px;
        margin: 0 auto;
        display: flex;
        margin-top: -100px;
        justify-content: space-between;
        .active {
          color: #666;
        }
        li {
          list-style: none;
          font-size: 16px;
          color: #aed6ff;
        }
      }
    }
    .enter-type {
      color: #666;
      font-size: 14px;
      width: 700px;
      margin: 0 auto;
      display: flex;
      justify-content: space-between;
      list-style: none;
      margin-top: -70px;
      li {
        width: 150px;
        text-align: center;
        img {
          width: 115px;
          height: 115px;
        }
        .type-name {
          margin: 30px 0px;
          color: #494949;
          font-size: 18px;
          white-space: nowrap;
        }
        .type-content {
          text-align: justify;
          line-height: 22px;
          height: 154px;
        }
        .type-apply {
          border: 1px solid #aed6ff;
          padding: 7px 0px;
          background-color: #fff;
          color: #333;
          border-radius: 4px;
          font-size: 16px;
          line-height: 26px;
          &:hover{
            background: #aed6ff;
            color: #fff;
          }
        }
      }
    }
  }
}
</style>


